<template>
  <div class="layer-attribute-wrap" v-if="sceneStore.selLayer">
    <component
      :is="componentId"
      :form="sceneStore.selLayer"
      ref="formRef"
      :model="sceneStore.selLayer"
      label-position="top"
      @validate="formValidate"
      @form-validate="formValidate"
      @pic-change="choosePicVisible = true"
    ></component>
  </div>

  <!-- 插入图片 -->
  <ChoosePic
    v-if="choosePicVisible"
    v-model="choosePicVisible"
    :eff-type="7"
    @close-handle="choosePicClose"
    @sel-pic="picChange"
  />
</template>

<script setup lang="ts">
import { useSceneStore } from '@/store/scene';
import Form from './form.vue';
import FormDiv from './form-div.vue';
import Gltf from './gltf-v1.vue';
import GltfEffect from './gltf-effect.vue';
import Entity from './entity.vue';
import Road from './road.vue';
import Drawlabel from './drawlabel.vue';
import FakeParticleSystem from './fake-particle-system.vue';
import ChoosePic from '@/components/choose-pic.vue';
import ImageLayer from './image-layer.vue';
import Osgb from './osgb.vue';
import Point from './point.vue';
import PoyLine from './poly-line.vue';
import PoyGon from './poly-gon.vue';
import JLG from './jlg.vue';
import RegionEffect from './region-effect.vue';
import TerrainLayer from './bottom-plate/terrain.vue';

defineOptions({
  name: 'LayerAttribute',
});

const sceneStore = useSceneStore();
const formRef = ref();
const choosePicVisible = ref<boolean>(false);
const componentId = computed(() => {
  if (!sceneStore.selLayer) return '';
  if (sceneStore.selLayer.type === 'gltfmodel') {
    if (sceneStore.selLayer.actualType && sceneStore.selLayer.actualType === 'gltfmodeleffect') {
      return GltfEffect;
    }
    return Gltf;
  }
  if (sceneStore.selLayer.type === 'div') {
    return FormDiv;
  }
  if (sceneStore.selLayer.type === 'entity') {
    return Entity;
  }
  if (sceneStore.selLayer.type === 'road') {
    return Road;
  }
  if (sceneStore.selLayer.type === 'drawlabel') {
    return Drawlabel;
  }
  if (sceneStore.selLayer.type === 'fake_particleSystem') {
    return FakeParticleSystem;
  }
  if (['imageLayer', 'image'].includes(sceneStore.selLayer.type)) {
    return ImageLayer;
  }
  if (sceneStore.selLayer.type === 'tileset') {
    return Osgb;
  }
  if (sceneStore.selLayer.type === 'point') {
    return Point;
  }
  if (sceneStore.selLayer.type === 'polyline') {
    return PoyLine;
  }
  if (sceneStore.selLayer.type === 'polygon') {
    return PoyGon;
  }
  if (sceneStore.selLayer.type === 'bimModel') {
    return JLG;
  }
  if (sceneStore.selLayer.type === 'regionEffect') {
    return RegionEffect;
  }
  if (sceneStore.selLayer.type === 'terrain') {
    return TerrainLayer;
  }
  return Form;
});

onBeforeUnmount(() => {
  sceneStore.editError = false;
});

function formValidate(fieldName: string, valid: boolean) {
  const { cimInstance } = window;
  sceneStore.editError = !valid;
  if (sceneStore.editError || !sceneStore.selLayer) return;
  // 编辑图层
  if (['gltfmodel', 'entity'].includes(sceneStore.selLayer.type)) {
    let translation = [0, 0, 0];
    let rotation = [0, 0, 0];
    if (sceneStore.selLayer.attr.translation) {
      translation = sceneStore.selLayer.attr.translation.map((v: any) => Number(v));
    }
    if (sceneStore.selLayer.attr.rotation) {
      rotation = sceneStore.selLayer.attr.rotation.map((v: any) => Number(v));
    }
    const param: any = {
      pose: {
        position: sceneStore.selLayer.attr.position?.map((v: any) => Number(v)),
        translation,
        rotation,
        scale: Number(sceneStore.selLayer.attr.scale),
      },
    };
    if (sceneStore.selLayer.attr.color) {
      param.color = sceneStore.selLayer.attr.color;
    }
    console.log('-----更新图层------', param);
    cimInstance.api.updateLayerGraphics(sceneStore.selLayer.layerName, param);
    const rotation_model = {
      x: Number(rotation[0]),
      y: Number(rotation[1]),
      z: Number(rotation[2]),
    };
    coverData(param);
    const position = cimInstance.api.getTransformedPosition(param.pose);
    const position_model = {
      x: Number(position[0]),
      y: Number(position[1]),
      z: Number(position[2]),
    };
    cimInstance.api.updateEffectModel({
      position: position_model,
      rotation: rotation_model,
      scale: Number(sceneStore.selLayer.attr.scale),
    });
    cimInstance.api.refreshOrbitController();
    return;
  }
  if (['drawlabel'].includes(sceneStore.selLayer.type)) {
    // const config = {
    //   entityId: sceneStore.selLayer.attr.entityId,
    //   image: {
    //     imageUrl: sceneStore.selLayer.attr.image,
    //     width: Number(sceneStore.selLayer.attr.width),
    //     height: Number(sceneStore.selLayer.attr.height),
    //     scale: 2, // 标签闪烁
    //     isBlink: sceneStore.selLayer.attr.isBlink, // 标签闪烁
    //     heightReference: sceneStore.selLayer.attr.heightReference ? 'CLAMP_TO_GROUND' : 'NONE', // 标签贴地
    //     scaleByDistanceArray: sceneStore.selLayer.attr.scaleByDistanceArray.map((v: any) =>
    //       Number(v)
    //     ),
    //   },
    //   coordinates: sceneStore.selLayer.attr.position.map((v: any) => Number(v)),
    // };
    // cimInstance.api.updateLayerGraphics(sceneStore.selLayer.layerName, config);

    return;
  }
  if (['fake_particleSystem'].includes(sceneStore.selLayer.type)) {
    // const config = {
    //   ...sceneStore.selLayer.attr.config,
    //   longitude: Number(sceneStore.selLayer.attr.position[0]),
    //   latitude: Number(sceneStore.selLayer.attr.position[1]),
    //   height: Number(sceneStore.selLayer.attr.position[2]),
    //   semiMajorAxis: Number(sceneStore.selLayer.attr.semiMajorAxis),
    //   semiMinorAxis: Number(sceneStore.selLayer.attr.semiMinorAxis),
    //   speed: Number(sceneStore.selLayer.attr.speed),
    //   circleCount: Number(sceneStore.selLayer.attr.circleCount),
    // };

    // cimInstance.api.updateLayerGraphics(sceneStore.selLayer.layerName, {
    //   pose: {
    //     position: sceneStore.selLayer.attr.position.map((v: any) => Number(v)),
    //     translation: [0, 0, 0],
    //     rotation: sceneStore.selLayer.attr.rotation.map((v: any) => Number(v)),
    //     scale: Number(sceneStore.selLayer.attr.scale),
    //   },
    //   color: sceneStore.selLayer.attr.color || '',
    // });
    // const position = {
    //   x: Number(sceneStore.selLayer.attr.position[0]),
    //   y: Number(sceneStore.selLayer.attr.position[1]),
    //   z: Number(sceneStore.selLayer.attr.position[2]),
    // };
    // const rotation = {
    //   x: Number(sceneStore.selLayer.attr.rotation[0]),
    //   y: Number(sceneStore.selLayer.attr.rotation[1]),
    //   z: Number(sceneStore.selLayer.attr.rotation[2]),
    // };
    // cimInstance.api.updateEffectModel({
    //   position,
    //   rotation,
    //   scale: Number(sceneStore.selLayer.attr.scale),
    // });
    // cimInstance.api.refreshOrbitController();
    // cimInstance.api.replaceParticleSystem(sceneStore.selLayer.json.components[0].name, config);
    return;
  }

  if (['tileset'].includes(sceneStore.selLayer.type)) {
    let translation = [0, 0, 0];
    let rotation = [0, 0, 0];
    if (sceneStore.selLayer.attr.translation) {
      translation = sceneStore.selLayer.attr.translation.map((v: any) => Number(v));
    }
    if (sceneStore.selLayer.attr.rotation) {
      rotation = sceneStore.selLayer.attr.rotation.map((v: any) => Number(v));
    }
    const param: any = {
      pose: {
        translation,
        rotation,
        scale: Number(sceneStore.selLayer.attr.scale),
      },
    };
    if (sceneStore.selLayer.attr.color) {
      param.color = sceneStore.selLayer.attr.color;
    }
    coverData(param);
    param.material = sceneStore.selLayer.attr.material;
    console.log('-----更新图层------', param);
    cimInstance.api.updateLayerGraphics(sceneStore.selLayer.layerName, param);
  }
  if (['point', 'polyline', 'polygon'].includes(sceneStore.selLayer.type)) {
    cimInstance.api.updateLayerGraphics(sceneStore.selLayer.layerName, sceneStore.selLayer.attr);
  }
  if (sceneStore.selLayer.type === 'bimModel') {
    const position = [
      Number(sceneStore.selLayer.attr.position[0]),
      Number(sceneStore.selLayer.attr.position[1]),
      Number(sceneStore.selLayer.attr.position[2]),
    ];
    let translation = [0, 0, 0];
    let rotation = [0, 0, 0];
    if (sceneStore.selLayer.attr.translation && sceneStore.selLayer.attr.translation) {
      translation = sceneStore.selLayer.attr.translation.map((v: any) => Number(v));
    }
    if (sceneStore.selLayer.attr.rotation && sceneStore.selLayer.attr.translation) {
      rotation = sceneStore.selLayer.attr.rotation.map((v: any) => Number(v));
    }
    const param = {
      pose: {
        position,
        translation,
        rotation,
        scale: Number(sceneStore.selLayer.attr.scale),
      },
      color: sceneStore.selLayer.attr.color || '',
    };
    coverData(param);
    console.log('xxxxx', param);
    cimInstance.api.updateLayerGraphics(sceneStore.selLayer.layerName, param);
    cimInstance.api.refreshOrbitController(fieldName);
  }
  if (['image', 'imageLayer'].includes(sceneStore.selLayer.type)) {
    if (!sceneStore.selLayer.attr) return;
    cimInstance.api.setLayerProperty(sceneStore.selLayer.layerName, sceneStore.selLayer.attr);
  }
}

// 清空对象里没有值的key
function coverData(data: any) {
  for (const key in data) {
    if (!data[key]) {
      delete data[key];
    } else {
      if (Object.prototype.toString.call(data[key]) === '[object Object]') {
        coverData(data[key]);
      }
    }
  }
}

function choosePicClose() {
  choosePicVisible.value = false;
}

function picChange(src: string) {
  choosePicClose();
  formRef.value.picChangeCallBack && formRef.value.picChangeCallBack(src);
}

function copyNotValue(preObj: any) {
  const param: any = {};
  for (const key in preObj) {
    if (preObj[key]) {
      param[key] = preObj[key];
    }
  }
  return param;
}
</script>

<style lang="less" scoped>
.layer-attribute-wrap {
  :deep(.el-form) {
    &-item {
      padding: 0 20px;

      .row-item {
        &-col {
          flex: 1;
          display: flex;
          margin-right: 22px;
          .content {
            display: flex;
            align-items: center;
          }
          &.column {
            flex-direction: column;
            .title {
              flex: 0 0 auto;
            }
          }
          &:last-child {
            margin-right: 0px;
          }
        }
      }
    }
  }
}
:deep(.style-image) {
  align-items: center;
  &-wrap {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
  &-btn {
    color: #0560fd;
    cursor: pointer;
    margin-left: 20px;
  }
}
:deep(.el-collapse) {
  --el-collapse-header-height: auto;
  --el-collapse-border-color: transparent;
  --el-collapse-header-bg-color: transparent;
  --el-collapse-content-bg-color: transparent;
  &-item {
    &__header {
      color: #fff;
      padding: 10px 20px;
      border-bottom-color: #1f2329;
      .el-icon {
        transform: rotate(-90deg);
        color: #999;
        &.is-active {
          transform: rotate(90deg);
        }
      }
    }
    &__content {
      padding-top: 20px;
      padding-bottom: 10px;
      color: #fff;
      .el-form-item {
        &:last-child {
          margin-bottom: 0px;
        }
      }
    }
  }
}
:deep(.el-input-number) {
  width: auto;
  &__decrease,
  &__increase {
    width: 24px;
    background: transparent;
    border-left: none;
    border-bottom: none !important;
    .el-icon {
      background: url('~@/assets/png/up.png') no-repeat;
      background-size: cover;
      svg {
        display: none;
      }
    }
  }
  &__decrease {
    .el-icon {
      transform: rotate(180deg) scale(0.8) !important;
      margin-right: -1px;
    }
  }
  .el-input {
    &__wrapper {
      padding-left: 11px;
      padding-right: 26px;
    }
  }
}
</style>
